<template>
   <div class="app-dict">
    <Table
      :table-columns="tableColumns"
      :table-loading="tableLoading"
      :table-data="tableData"
      :hide-pagination="true"
    >
      <template v-slot:tools>
        <el-button-group>
          <el-button type="primary" @click="handleAdd">添加服务</el-button>
        </el-button-group>
      </template>
      <template #opt="scope">
        <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </Table>
    <DialogForm
      v-model:visible="showDialog"
      :title="dialogTitle"
      :form-items="formItems"
      :form-data="formData"
      :form-rules="formRules"
      :loading="loading"
      width="500px"
      @submit="handleSubmit"
    />
   </div>
</template>

<script setup name="dict">
import Table from "@/components/Table/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { getDictList, saveDict } from "@/api/system/dict";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const tableLoading = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const showDialog = ref(false)
const formRules = ref({
  keyName: [
    { required: true, message: '请输入服务名称', trigger: 'blur' },
  ],
  keyValue: [
    { required: true, message: '请输入服务内容', trigger: 'blur' }
  ]
})
const formData = ref({})
const data = reactive({
  tableColumns: [
    { label: "服务名称", prop: "keyName" },
    { label: "服务内容", prop: "keyValue" },
    { label: "服务描述", prop: "description" },
    { label: "创建时间", prop: "gmtCreate" },
    { label: "操作", slot: "opt" }
  ],
  queryColumns: [],
  pageParams: {
   current: 1,
   size: 10
  },
  queryParams: {},
  formItems: [
    { label: "服务名称", prop: "keyName", type: "input" },
    { label: "服务内容", prop: "keyValue", type: "input" },
    { label: "服务描述", prop: "description", type: "input" },
  ]
})

const { tableColumns, pageParams, queryParams, formItems } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
   tableLoading.value = true
   const data  = {
      ...queryParams.value,
      ...pageParams.value
   }
   getDictList(data)
   .then(res => {
      tableData.value = res.data
   })
   .finally(() => {
      tableLoading.value = false
   })
}
getList()

/** 打开新增弹窗 */
const handleAdd = () => {
 dialogTitle.value = '添加服务'
  // 重置表单数据
  formData.value = {}
  showDialog.value = true
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
 dialogTitle.value = '编辑服务'
  // 重置表单数据
  formData.value = {
    ...row
  }
  showDialog.value = true
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveDict({id: row.id, delFlag: -1}).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
  })
}

const handleSubmit = async (data) => {
  loading.value = true
  try {
    // 这里调用API进行提交
    await saveDict(data)
    showDialog.value = false
    getList()
    proxy.$modal.msgSuccess("操作成功")
  } finally {
    loading.value = false
  }
}
</script>
<style lang="scss">
.app-dict {
  padding: 8px;
}
</style>